<template>
  <div class="container-box">
    <!--筛选表单-->
    <el-row type="flex" justify="space-between">
      <div class="filter-form">
        <el-form ref="form" label-width="80px" :inline="true" size="small">
          <el-form-item>
            <el-input
              ref="input"
              v-model="queryData.role_name"
              placeholder="请输入角色名"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              plain
              @click="onSearch"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          plain
          @click="$refs.Addrole.flag = true"
          >新增</el-button
        >
      </div>
    </el-row>
    
    <!--表单区域-->
    <div class="table-box">
      <el-table :data="list" border stripe>
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column prop="id" label="角色ID" />
        <el-table-column prop="role_name" label="角色名称" />
        <el-table-column prop="identify" label="角色标识" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column prop="created_at" label="添加时间" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="amend(row.id)"
              circle
            />&nbsp;
            <el-popconfirm
              title="确定删除吗"
              confirm-button-text="确定"
              cancel-button-text="取消"
              cancelButtonType="text"
              @confirm="onDelete(row.id)"
            >
              <el-button
                slot="reference"
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
              />
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <el-row type="flex" style="height: 60px" align="middle" justify="end">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="queryData.page"
        :page-sizes="[10, 20, 80, 100]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
        :pager-count="7">
      </el-pagination>
    </el-row>

    <!-- =============================新增 -->
    <Addrole ref="Addrole" @upDataList="initData"></Addrole>
  </div>
</template>
<script>
import { delRoleAPI, editRoleApi, getRoleAPI } from "@/api/role";
import { toArray } from "@/utils/index";
import Addrole from "./components/addrole.vue";

export default {
  name: "RolePage",
  components: {
    Addrole,
  },
  data() {
    return {
      list: [],
      queryData: {
        id: "",
        role_name: "",
        identify: "",
        description: "",
        created_at: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      clickTreeList: [],
    };
  },
  async created() {
    await this.initData();
    if (this.$refs.Addrole && this.$route.params.id)
      this.onDelete(this.$route.params.id);
  },
  methods: {
    // 页面渲染请求
    async initData() {
      const res = await getRoleAPI(this.queryData);
      // console.log(res);
      this.list = res.list;
      this.total = res.total;
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 搜索
    onSearch() {
      this.queryData.page = 1;
      this.initData();
    },
    // 重置
    onReset() {
      this.queryData = {
        role_name: "",
        page: 1,
        limit: 10,
      };
      this.initData();
    },
    // 修改页面数据回显
    async amend(id) {
      // console.log(id);
      const res = await editRoleApi(id);
      // console.log(res);
      this.$refs.Addrole.fromData = res;
      this.$refs.Addrole.clickTreeList = toArray(res.authlist).map(
        (item) => item.id
      );
      // 赋值给表单变量
      this.$refs.Addrole.formData = { ...res, authlist: this.clickTreeList };
      // 打开弹框
      this.$refs.Addrole.flag = true;
    },
    // 删除
    async onDelete(id) {
      // 发送请求
      // await this.$confirm('确定删除？')
      await delRoleAPI(id);
      // 信息提示
      this.$message.success("删除成功");
      // 边缘问题，如果不是第一页且该页只有一个删除成功，页码减1再拉取列表
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      // 重新拉取表格
      this.initData();
    },
  },
};

</script>
<style scoped>
.container-box {
  padding: 30px;
}
</style>
